<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>手机端活动</title>

  <!-- 引入动画CSS样式 -->
  <link rel="stylesheet" href="./assets/css/animate.min.css">

  <!-- 引入rem样式 -->
  <link rel="stylesheet" href="./assets/css/rem.css">

  <!-- 引入页面样式 -->
  <link rel="stylesheet/less" href="./assets/css/index.less">

</head>

<body>
  <!-- banner -->
  <div class="banner">
    <img src="./assets/images/background01.png" alt="">
  </div>

  <!-- discount -->
  <div class="discount">
    <div class="price">
      <div class="item">
        <img src="./assets/images/price.png" alt="">
        <p class="money">￥<span>10</span></p>
        <p class="full">满199元使用</p>
        <div class="get-btn">立即领取</div>
      </div>

      <div class="item">
        <img src="./assets/images/price.png" alt="">
        <p class="money">￥<span>20</span></p>
        <p class="full">满299元使用</p>
        <div class="get-btn">立即领取</div>
      </div>

      <div class="item">
        <img src="./assets/images/price.png" alt="">
        <p class="money">￥<span>30</span></p>
        <p class="full">满399元使用</p>
        <div class="get-btn">立即领取</div>
      </div>
    </div>

    <div class="gift">
      <!-- 分割线 -->
      <div class="line"></div>
      <div class="give">钜惠2满688再送4重礼</div>
    </div>

    <!-- 重礼盒 -->
    <div class="frame">
      <img src="./assets/images/box.png" alt="">
      <div class="goods">
        <div class="item">
          <img src="./assets/images/toy.jpg" alt="">
          <p class="amount">下单实付金额满69元送</p>
        </div>

        <div class="item">
          <img src="./assets/images/cup.jpg" alt="">
          <p class="amount">下单实付金额满79元送</p>
        </div>

        <div class="item">
          <img src="./assets/images/plant.jpg" alt="">
          <p class="amount">下单实付金额满89元送</p>
        </div>

        <div class="item">
          <img src="./assets/images/tea.jpg" alt="">
          <p class="amount">下单实付金额满99元送</p>
        </div>
      </div>
    </div>
  </div>

  <!-- recommend -->
  <div class="recommend">
    <p class="title">宝贝推荐</p>
    <div class="goods-box1">
      <div class="box-in">
        <div class="tag">爆款推荐</div>
        <div class="goods">
          <img src="./assets/images/product1.jpg" alt="">
          <div class="text">
            <p class="name">甄选坚果</p>
            <p class="desc">甄选品质好果，颗颗饱满</p>
            <p class="price">￥ 79</p>
            <div class="buy">立即抢购</div>
          </div>
        </div>
      </div>
    </div>

    <div class="goods-box2">
      <div class="box-in">
        <div class="tag">爆款推荐</div>
        <div class="goods">
          <div class="text">
            <p class="name">电煮锅</p>
            <p class="desc">功率低，自动断电，操作简单</p>
            <p class="price">￥ 59</p>
            <div class="buy">立即抢购</div>
          </div>
          <img src="./assets/images/product2.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

  <!-- products -->
  <div class="products">
    <p class="title">宝贝推荐</p>
    <div class="box">
      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell1.jpg" alt="">
          <p class="desc">专利控油技术，持久蓬松</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价99</span>￥</p>
              优惠价
            </div>
            <div class="right">68</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell5.jpg" alt="">
          <p class="desc">晴雨两用伞，多种颜色可选</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价69</span>￥</p>
              优惠价
            </div>
            <div class="right">56</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell2.jpg" alt="">
          <p class="desc">洛阳地道牡丹酥</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价58</span>￥</p>
              优惠价
            </div>
            <div class="right">38</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell3.jpg" alt="">
          <p class="desc">伊利纯牛奶，优质乳蛋白</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价69</span>￥</p>
              优惠价
            </div>
            <div class="right">59</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell4.jpg" alt="">
          <p class="desc">宠物外出太空包，宠物出门无忧</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价99</span>￥</p>
              优惠价
            </div>
            <div class="right">88</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      <div class="sell">
        <div class="top">
          <img src="./assets/images/sell5.jpg" alt="">
          <p class="desc">功率低，烧水快，简约好看</p>
        </div>
        <div class="foot">
          <div class="price">
            <div class="left">
              <p class="origin"><span>原价59</span>￥</p>
              优惠价
            </div>
            <div class="right">49</div>
          </div>
          <div class="buy">立即抢购</div>
        </div>
      </div>

      
    </div>
  </div>

  <!-- footer -->
  <div class="footer">
    <p class="more">查看全部宝贝</p>
    <div class="icon">
      <img src="./assets/images/up.png" alt="">
    </div>
  </div>
</body>

</html>
<script src="./assets/js/wow.min.js"></script>
<script>
  new WOW().init()
</script>

<script src="./assets/js/less.min.js"></script>